<template>
  <div>
    <div id="map"
         class="map">
    </div>
    <el-select v-model="value"
               placeholder="请选择"
               @change="layerChangeHandler">
      <el-option v-for="item in layerOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>

import Map from 'ol/Map';
import View from 'ol/View';
import { easeIn, easeOut } from 'ol/easing';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import OSM from 'ol/source/OSM';
import { defaults as defaultControls, Attribution } from 'ol/control.js';
import BingMaps from 'ol/source/BingMaps';
import { Text, Fill, Style, Stroke } from 'ol/style';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { GeoJSON } from 'ol/format';
import { getCenter } from 'ol/extent.js';

import 'ol/ol.css';

export default {
  data () {
    return {
      map: null,
      layerOptions: [
        { label: 'Aerial', value: 'Aerial' },
        { label: 'Road', value: 'Road' },
        { label: 'RoadOnDemand', value: 'RoadOnDemand' },
        { label: 'AerialWithLabels', value: 'AerialWithLabels' },
        { label: 'collinsBart', value: 'collinsBart' },
        { label: 'ordnanceSurvey', value: 'ordnanceSurvey' }],
      value: 'Aerial',
      vectorLayer: null
    }
  },
  methods: {
    layerChangeHandler (layerType) {
      var layers = this.map.getLayers();
      layers.forEach(layer => {
        if (layer === this.vectorLayer) {
          return;
        }
        var type = layer.getSource().getImagerySet();
        layer.setVisible(layerType === type);
      });
    }
  },
  mounted () {
    var layers = [];
    var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
    var lineGeoJSONUrl = "https://openlayers.org/en/latest/examples/data/geojson/vienna-streets.geojson";

    var textStyle = new Style({
      text: new Text({
        placement: 'line',
        font: 'bold 11px "Open Sans"',
        fill: new Fill({ color: 'white' })      }),
      stroke: new Stroke({
        width: 5,
        color: 'black',
        lineDash: [5, 15]
      })
    });
    var vectorSource = new VectorSource({
      format: new GeoJSON(),
      url: lineGeoJSONUrl
    });
    var vectorLayer = this.vectorLayer = new VectorLayer({
      declutter: true,
      source: vectorSource,
      style: function (feature) {
        textStyle.getText().setText(feature.get('name'));
        return textStyle;
      }
    });
    for (var i = 0, ii = this.layerOptions.length; i < ii; ++i) {
      layers.push(new TileLayer({
        visible: this.layerOptions[i].value === this.value,
        preload: Infinity,
        source: new BingMaps({
          key: key,
          imagerySet: this.layerOptions[i].value,
          // use maxZoom 19 to see stretched tiles instead of the BingMaps
          // "no photos at this zoom level" tiles
          maxZoom: 19
        })
      }));
    }
    var viewExtent = [1817379, 6139595, 1827851, 6143616];
    layers.push(vectorLayer);
    this.map = new Map({
      layers: layers,
      // Improve user experience by loading tiles while dragging/zooming. Will make
      // zooming choppy on mobile or slow devices.
      loadTilesWhileInteracting: true,
      target: 'map',
      view: new View({
        center: getCenter(viewExtent),
        zoom: 19,
        minZoom: 10,
        extent: viewExtent
      })
    });
  },
}
</script>
<style lang="scss" scoped>
#map {
  height: 800px;
}
</style>
